<template>
  <div class="container">
    <toast-layer v-if="toastShow" :toastContent="toastContent" :toastType="toastType"></toast-layer>
    <van-sticky>
      <div class="fixed-bar font-12 pad-l-15 pad-r-15">
        <div class="font-color-6">点击右侧按钮，查看你设置后的效果~</div>
        <div class="view-btn" @click="checkEls">查看效果</div>
    </div>
    </van-sticky>
    <!-- 有数据情况 -->
    <div v-if="!nodata">
      <div class="mar-t-10">
        <div v-for="(item, index) in listData" :key="index" class="shop-box flex flex-between pad-t-8 pad-b-20">
          <div class="mar-l-7 mar-r-7" @click="checkChange(index)">
            <van-checkbox :value="item.check" checked-color="#FF6529"></van-checkbox>
          </div>
          <div class="flex-item" @click="$pt.navigateTo({url: '/pages/shop/detail/main?goodsId=' + item.goodsId + '&goodsType=30'})">
            <goods-info :good="item" @click="goDetail(item)"></goods-info>
          </div>
        </div>
      </div>
    </div>
    <!-- 无数据 -->
    <div class="nodata" v-else>
      <img v-if="fileSpace" :src="fileSpace + '/images/w-icon-datanone-2.png'" class="width-118 height-102" alt="">
      <div class="title">暂无数据</div>
    </div>
    <div class="height-49"></div>
    <div class="fixed-foot">
      <div class="all-check" @click="onCheckAll">
        <van-checkbox :value="checkAll" checked-color="#FF6529">全选</van-checkbox>
      </div>
      <div class="distribution" v-if="listData.length !== 0" @click="distribution">
        一键铺货<span v-if="checkNum">({{checkNum}})</span>
      </div>
      <div class="distribution distribution-disable" v-else>
        一键铺货<span v-if="checkNum">({{checkNum}})</span>
      </div>
    </div>
  </div>
</template>
<script>
import ToastLayer from '@/components/ToastLayer'
import goodsInfo from '@/components/GoodsInfo'
import { pagingMyPurchaseGoods, oneKeyShopUserGoods, updateOrderStatByMemberId } from '@/api/personal'
import { getWechatConf } from '@/api/common'

export default {
  components: { goodsInfo, ToastLayer },
  data() {
    return {
      checkAll: false,
      listData: [],
      nodata: false,
      entityListQuery: {
        currentPage: 1,
        size: 10,
        ascs: '',
        descs: ''
      },
      checkNum: '',
      toastShow: false,
      toastType: '',
      toastContent: '',
      goodsIds: [],
      toAppId: ''
    }
  },
  onLoad() {
    // 初始化data
    Object.assign(this.$data, this.$options.data())
  },
  onShow() {
    this.toastShow = false
    this.checkAll = false
    this.initPage()
  },
  methods: {
    checkEls() {
      this.$pt.navigateToMiniProgram({appId: this.toAppId})
    },
    initPage() {
      this.nodata = false
      this.entityListQuery.memberId = this.getCustomerId
      if (!this.toastShow) {
        this.$pt.showLoading()
      }
      pagingMyPurchaseGoods(this.entityListQuery).then(response => {
        this.$pt.hideLoading()
        if (response.isError) return
        this.listData = response.data.records
        this.listData.forEach(item => {
          item.check = false
        })
        if (response.data.total === 0) {
          this.nodata = true
        }
      })
      updateOrderStatByMemberId({
        memberId: this.getShowBuyCard ? this.getCustomerId : this.getMemberId,
        memberType: 2,
        orderType: 2,
        orderStatus: 3
      }).then(response => {
      })
      // 获取跳转小程序APPID
      getWechatConf(this.getEnterpriseId).then(response => {
        if (response.isError) return
        this.toAppId = response.data.appId
      })
    },
    onCheckAll() {
      // 全选按钮触发事件
      this.checkAll = !this.checkAll
      this.listData.forEach((item, index) => {
        item.check = this.checkAll
      })
    },
    checkChange(index) {
      // 商品复选框点击事件
      let deepObj = this.$utils.deepClone(this.listData)
      deepObj[index].check = !deepObj[index].check
      this.listData = deepObj
      // 判断商品中是否有未选中状态
      let status = this.listData.findIndex(item => {
        return item.check === false
      })
      if (status === -1) {
        this.checkAll = true
      } else {
        this.checkAll = false
      }
    },
    goDetail(item) {
      // 去商品详情页
    },
    distribution() {
      this.goodsIds = []
      this.listData.forEach(e => {
        if (e.check === true) {
          this.goodsIds.push(e.goodsId)
        }
      })
      if (this.goodsIds.length === 0) {
        return
      }
      this.$pt.showModal({
        content: '是否确认铺货当前选择的' + this.goodsIds.length + '款商品？',
        success: res => {
          if (res.confirm) {
            oneKeyShopUserGoods(this.goodsIds.join(','), this.getCustomerId).then(response => {
              if (response.isError) return
              // 铺货成功
              this.checkAll = false
              this.toastShow = true
              this.toastType = 'success'
              this.toastContent = '铺货成功'
              this.initPage()
            })
          } else if (res.cancel) {
            console.log('用户取消')
          }
        }
      })
      // this.toastContent = '勾选存在下架商品'
    }
  }
}
</script>
<style lang="less" scoped>
.fixed-bar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 49px;
  background: #FFFFFF;
  .view-btn{
    width: 70px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    color: white;
    border-radius: 12px;
    background: linear-gradient(to right, #FF9048, #FF4E23);
  }
}
.shop-box{
  background: white;
  margin: 0 15px;
  border-radius: 5px;
  margin-top: 10px;
  &:first-child{
    margin-top: 0;
  }
}
.fixed-foot{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  height: 49px;
  background: white;
  .all-check{
    width: 90px;
    height: 49px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .distribution{
    background: linear-gradient(to right, #FF9048, #FF4E23);
    color: white;
    height: 49px;
    line-height: 49px;
    width: 285px;
    text-align: center;
    &-disable{
      background: #b6b6b6;
    }
  }
}
.color-clear{
  color: #FF5540;
}
.invalid{
  border-radius: 7.25px;
  background: #999999;
  font-size: 11px;
  color: #FFFFFF;
  width: 30px;
  height: 15px;
  line-height: 15px;
  text-align: center;
}
.invalid-mask{
  background: #FFFFFF;
  opacity: 0.5;
  width: 100%;
  height: 100%;
}
.toast-mask{
  height: 100%;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
}
.toast{
  min-width: 130px;
  color: white;
  padding: 16px 0;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  position: fixed;
  left: calc(50% - 65px);
  top: 40%;
  flex-direction: column;
  align-items: center;
  img{
    width: 30px;
    height: 30px;
  }
}
.nodata{
  padding-top: 130px;
  img{
    margin: 0 auto;
  }
  .title{
    margin-top: 35px;
    text-align: center;
    font-size: 18px;
  }
}
</style>
